<template>
    <view class="games-page">
		<Loading ref="loading" :custom="false" :shadeClick="false" :type="2" ></Loading>
        <view class="gameList">
			<view class="gameItem" @click="goHome()" >
			    <view class="game-img">
			        <u-image width="100%" height="100%" src="/static/img/login/yb12.png"></u-image>
			    </view>
			    <text class="game_text">游戏大厅</text>
			</view>
            <view class="gameItem" v-for="(gameItem, index) in gameList" :key="index"
                @tap="changePage(gameItem.id,index)"  style="position: relative;">
				<!-- <view v-if="gameItem.type_name == gameTypeChoseText" style="position: absolute; width: 100%; height: 100%; top:-5rpx" class="chose"></view> -->
                <view class="game-img">
                    <u-image width="100%" height="100%" :src="gameItem.image"></u-image>
                </view>
                <text class="game_text">{{ gameItem.type_name }}</text>
            </view>
        </view>
        <template v-for="(gameItem, ind) in gameList">
            <view class="g_list" v-if="gamePage == gameItem.id">
                <view class="baccaratItem" v-for="(tableItem, num) in gameTable" :key="num"
                    @tap="intoTable(tableItem)">
                    <view class="itemTitle">
                        <view class="titleText">{{tableItem.table_title}}</view>
                        <view class="parameter">
                            <text class="p">{{tableItem.p}}</text>
                            <text class="t">{{tableItem.t}}</text>
                            <text class="b">{{tableItem.b}}</text>
                        </view>
                    </view>
                    <view class="itemBody">
                        <view class="LotusOfficer">
                            <u-image width="100%" height="194rpx" :src="tableItem.he_guan_head_img">
                            </u-image>
                            <!-- <view style="height: 32rpx;margin-top: 8rpx;background-color: #333333;"></view> -->
                        </view>
                        <view class="desktop">
							<web-view :src="configService.lzUrl+'/list.html?tableId=' + tableItem.id+'&pageName=nothome'"></web-view>
                            <cover-view class="cover">
                                <view class="state countDown" :style='tableItem.countDownWenzi'>
                                    {{ tableItem.showCoverText }}
									<image src="/static/img/index/start.png" style="width: 108rpx;height: 96rpx; display: none;" :style='tableItem.showImg'></image>
                                </view>
                            </cover-view>
                        </view>
                    </view>
                    <view class="itemFooter">
                    </view>
                </view>
            </view>
        </template>
    </view>
</template>

<script>
    import api from "@/api/game"
	import Loading from '@/components/loading/loading.vue'
	import configService from '@/common/service/config.service.js'
    export default {
		components:{
			Loading
		},
		props:["pageNo"],
        data() {
            return {
                gameList: [],
                gameTable: [],
                gamePage: 3,
                swiperCurrent: 0,
                counTDown: 0,
                type_class: {},
                temp_timer: [],
				gameTypeChoseText:'百家乐',
				configService: configService
            };
        },
        mounted() {
			this.coloseAudio() // 初始化 音频 是为了关闭音频
            this.getGameInfo() // 初始化 游戏信息
			// 列表跳转 时候 百家乐
			if(this.pageNo == 0){
				this.changePage(3, 0) 
				this.gameTypeChoseText = '百家乐'
			}
			// 列表跳转 时候 龙虎
			if(this.pageNo == 1){
				this.changePage(2, 1) 
				this.gameTypeChoseText = '龙虎'
			}
			this.$refs.loading.open();
			setTimeout(() => {
				this.$refs.loading.close();
			}, 2000)
        },
		onShow() {
			this.coloseAudio() // 初始化 音频 是为了关闭音频
		},
		onLoad() {
			this.coloseAudio() // 初始化 音频 是为了关闭音频
		},
        methods: {
			// 关闭音频
			coloseAudio() {
				this.$innerAudioContext.src = ''
			},
			// 获取游戏信息
            getGameInfo() {
                api.gameType(this.loginform).then((res) => {
                    this.loading = false;
                    if (res.data.code == 200) {
                        this.gameList = res.data.data
                    } else {						
                        this.$tip.alert(res.data.message);
                    }
                })
            },
			/**
			 * 桌子列表排序
			 * */
			sortTableList(){
				this.gameTable.sort((x, y) => {
					if(x.id > y.id){
						return 1;
					}else if(x.id < y.id){
						return -1;
					}else{
						return 0;
					}
				})
			},
			// 获取台桌列表
            getTableList() {
                api.gameTable(this.type_class).then((res) => {
                    this.loading = false;
                    if (res.data.code == 200) {
                        this.gameTable = res.data.data
                        for (let i = 0; i < this.temp_timer.length; i++) {
                            clearInterval(this.temp_timer[i])
                        }
						this.sortTableList()
                        this.getTableState()
                    } else {
                        this.$tip.alert(res.data.message);
                    }
                })
            },
			// 遍历台桌状态
            getTableState() {
                this.gameTable.forEach((tabItem, index) => {
					let showCoverText_temp = ''
					let countDownWenzi_temp = ''
					let showImg_temp = ''
					
                    if (tabItem.status == 1) {
                        if (tabItem.run_status == 0) {
						// 暂停状态
							countDownWenzi_temp = {border: 'none',background:"none"}
                            showCoverText_temp = '暂停'
                        } else if (tabItem.run_status == 1) {
						// 倒计时状态 
                            if (tabItem.end_time > 0) {
                                this.temp_timer[index] = setInterval(() => {
                                    if (tabItem.end_time > 0) {
                                        tabItem.end_time -= 1
										
										// 倒计时显示 开始 
										countDownWenzi_temp = {}
										showImg_temp = {}
										// 倒计时显示 结束 
										
                                        showCoverText_temp = tabItem.end_time
                                        this.$set(tabItem, 'showCoverText', showCoverText_temp)
                                    } else {
                                        this.getTableList()
                                    }
                                }, 1000)
                            }
                        } else if (tabItem.run_status == 2) {
						// 开牌中，非倒计时 状态
							countDownWenzi_temp = {border: 'none',background:"none"}
							showImg_temp = {display:'block'}
                            showCoverText_temp = ''
                        }
                    } else {
						// 维护状态
						countDownWenzi_temp = {border: 'none',background:"none"}
                        showCoverText_temp = '维护中'
                    }
                    this.$set(tabItem, 'showCoverText', showCoverText_temp)
					this.$set(tabItem, 'countDownWenzi', countDownWenzi_temp)
					this.$set(tabItem, 'showImg', showImg_temp)
                })
            },
			// 切换类型页面 百家乐列表 到 龙虎列表
            changePage(name, index) {
                this.type_class.type_id = name;
                this.getTableList();
                this.gamePage = name
                this.swiperCurrent = index
            },
			// 进入台桌
            intoTable(index) {
				// 正常状态 进入台桌
                if (index.run_status == 1 || index.run_status == 2) {
                    uni.redirectTo({
                        url: '/pages/live/live?id=' + index.id + '&type_id=' + index.game_type
                    })
                    return;
                }
				// 异常状态 退出台桌
                this.$tip.alert('维护中...');
            },
			// 返回首页
			goHome(){
				uni.navigateTo({
					url:"/pages/index/index"
				})
			}
        }
    }
</script>

<style lang="scss" scoped>
	.chose{
		background: rgba(218, 167, 58, 0.2)
	}
    .games-page {
        position: absolute;
        width: 100%;
        // height: 100%;
        background-color: #1E1D23;
        padding-bottom: 100rpx;

        .gameList {
            width: 100%;
            height: 104rpx;
            background-color: #25252D;
            display: flex;

            .gameItem {
                width: 25%;
                height: 100%;
                border: 2rpx solid #34333B;
                display: flex;
                flex-direction: column;
                // justify-content: center;
                align-items: center;
                color: #E5CA9A;
                font-size: 24rpx;
                position: relative;
                padding-top: 10rpx;

                .game-img {
                    width: 72rpx;
                    height: 72rpx;
                    border-radius: 50%;
                    border: 2rpx solid #E5CA9A;
                }

                .game_text {
                    position: absolute;
                    bottom: 10rpx;
                }
            }
        }

        .g_list {
            padding: 16rpx 8rpx;

            .baccaratItem {
                width: 100%;
                // height: 264rpx;
				height: 248rpx;
                padding: 0 16rpx;
                // background-color: #E4CC9D;
                margin-bottom: 12rpx;

                .itemTitle {
                    height: 28rpx;
                    line-height: 28rpx;
                    width: 100%;
                    background-color: #181818;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .titleText {
                        font-size: 24rpx;
                        transform: scale(.8);
                        transform-origin: 0 10%;
                        color: #E4CC9D;
                        margin-left: 20rpx;
                    }

                    .parameter {
                        font-size: 24rpx;
                        transform: scale(.8);
                        transform-origin: 70% 20%;

                        // margin-right: 20rpx;
                        .p,
                        .t,
                        .b {
                            margin-left: 40rpx;
                            position: relative;
                        }

                        .p:after,
                        .t:after,
                        .b:after {
                            width: 20rpx;
                            height: 20rpx;
                            line-height: 20rpx;
                            border-radius: 50%;
                            position: absolute;
                            left: -20rpx;
                            top: calc(50% - 10rpx);
                            color: #FFFFFF;
                            font-size: 24rpx;
                            text-align: center;
                        }

                        .p:after {
                            content: 'P';
                            background-color: #4D88CF;
                        }

                        .t:after {
                            content: 'T';
                            background-color: #4F8675;
                        }

                        .b:after {
                            content: 'B';
                            background-color: #FF6568;
                        }

                        .p {
                            color: #4D88CF;
                        }

                        .t {
                            color: #4F8675;
                        }

                        .b {
                            color: #FF6568;
                        }
                    }
                }

                .itemBody {
                    display: flex;
                    background-color: #FFFFFF;
                    height: 194rpx;

                    .LotusOfficer {
                        width: 152rpx;
						background-color: #070f29;
                    }

                    .desktop {
                        width: 80%;
                        position: relative;

                        .cover {
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            z-index: 99;
                        }

                        .state {
                            position: absolute;
                            right: 40rpx;
                            top: 4rpx;
                            z-index: 999;
                        }

                        .countDown {
							text-align: center;
                            width: 100rpx;
                            height: 100rpx;
                            line-height: 100rpx;
                            text-align: center;
                            font-size: 44rpx;
                            font-weight: 600;
                            background-color: rgba(0, 0, 0, .6);
                            border-radius: 50%;
                            border: 4rpx solid;
                            border-color: #FB5D56;
                            color: #FB5D56;
							display: block;
                        }					
                    }
                }

                .itemFooter {
                    height: 12rpx;
                    width: 100%;
                    background-color: #1A1716;
                }
            }
        }


        uni-swiper {
            height: 976rpx;
        }
    }
</style>
